<template>
  <div class="customer">
    <div class="input-box">
      <panel-input title="客户姓名" placeholder="请编辑" @change="handleNameChange" />
      <panel-input title="客户手机号" placeholder="请输入" @change="hanldePhoneChange" />
    </div>
    <div class="brand">
      <div class="title">购买品牌</div>
      <div class="brand-list">
        <div class="list-item" v-for="(item, index) of values" :key="index">
          {{item.shop}}
          <span>|</span>
          {{item.brand}}
        </div>
      </div>
      <add-brand-btn @addBrandBtn="handleAddBrandBtn" />
    </div>
    <div class="btn">
      <my-button name="确定" @btnClick="handleBtnClick" />
    </div>
    <transition name="slide">
      <router-view @brandChange="handleBrandChange"></router-view>
    </transition>
  </div>
</template>
<script>
import PanelInput from '@/components/panel-input'
import AddBrandBtn from '@/components/add-brand-btn'
import { addCustomItem } from '@/api/my'
const ERR_OK = 200
export default {
  components: {
    PanelInput,
    AddBrandBtn
  },
  data () {
    return {
      form: {
        name: '',
        phone: '',
        shops: []
      },
      values: []
    }
  },
  methods: {
    handleBrandChange (Obj) {
      this.form.shops.push({ shop_id: Obj.shop_id, brand_name: Obj.brand })
      this.values.push({
        shop: Obj.shop,
        brand: Obj.brand
      })
      console.log(this.values)
    },
    handleNameChange (input) {
      this.form.name = input
    },
    hanldePhoneChange (input) {
      this.form.phone = input
    },
    handleBtnClick () {
      if (!this.form.name) {
        this.$toast('请填写客户姓名~')
        return
      }
      if (!this.form.phone) {
        this.$toast('请填写手机号码~')
        return
      }
      this._addCustomItem(this.form).then(res => {
        if (res.code === ERR_OK) {
          setTimeout(() => {
            this.$emit('success')
            this.$router.back()
          }, 2000)
        }
      })
    },
    handleAddBrandBtn () {
      if (this.$route.path === '/my/integral/customer') {
        this.$router.push({ path: '/my/integral/customer/add-brand' })
      } else if (this.$route.path === '/my/my-custom/add-custom') {
        this.$router.push('/my/my-custom/add-custom/add-brand')
      }
    },
    _addCustomItem ({ phone, name, shops, brands }) {
      return addCustomItem({ phone, name, shops, brands })
        .then(res => {
          if (res.code === ERR_OK) {
            this.$toast('添加成功~')
            return Promise.resolve(res)
          }
        })
        .catch(err => {
          console.log(err)
        })
    }
  }
}
</script>
<style lang="scss" scoped>
@import "@/styles/mixin.scss";
.customer {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 4;
  touch-action: none;
  background: #fff;
  padding: 0 0.36rem;
  box-sizing: border-box;
  .input-box {
    padding: 0.44rem 0 0.04rem 0;
  }
  .brand {
    width: 100%;
    .title {
      font-size: 0.32rem;
      font-family: PingFang SC;
      font-weight: 500;
      color: rgba(4, 0, 0, 1);
      line-height: 1.27rem;
    }
    .brand-list {
      .list-item {
        width: 100%;
        height: 1.09rem;
        line-height: 1.09rem;
        font-size: 0.26rem;
        font-family: PingFang SC;
        font-weight: 400;
        color: rgba(4, 0, 0, 1);
        border-bottom: 1px solid rgba(0, 3, 0, 0.3);
        span {
          padding: 0 0.15rem;
        }
      }
    }
    .add {
      width: 100%;
      height: 0.72rem;
      border: 1px dashed rgba(0, 4, 0, 1);
      display: flex;
      align-items: center;
      justify-content: center;
      margin-top: 0.55rem;
      i {
        display: inline-block;
        width: 0.23rem;
        height: 0.23rem;
        background: url("../../../assets/images/tj.png") no-repeat;
        background-size: cover;
        margin-right: 0.14rem;
      }
      span {
        font-size: 0.24rem;
        font-family: PingFang SC;
        font-weight: 400;
        color: #999999;
      }
    }
  }
  .btn {
    padding: 0 0.75rem;
    font-size: 0;
    width: 100%;
    box-sizing: border-box;
    position: absolute;
    left: 50%;
    bottom: 2rem;
    transform: translateX(-50%);
  }
}
@include slideEnter();
</style>
